import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { CellGroup, Cell, Image, Input, Button } from 'react-vant';

const Index = () => {
  const navigate = useNavigate()
  const city = localStorage.getItem('city')
  const { t, i18n } = useTranslation()
  const [lng, setLng] = useState('zh')
  const switchFN = () => {
    setLng(lng === 'zh' ? 'en' : 'zh')
    i18n.changeLanguage(lng === 'zh' ? 'en' : 'zh')
  }
  return (
    <div>
      <Button type="primary" size='mini' onClick={() => switchFN()}>{t('place')}</Button>
      <CellGroup>
        <Cell
          center
          title={t('title')}
          label={t('desc')}
          icon={<Image width={44} height={44} src='https://robohash.org/123?set=set5' round />}
          isLink
        />
      </CellGroup>

      <CellGroup>
        <Cell title={t('name')} value={<Input placeholder={t('namePlaceHolder')}></Input>} size='large' />
        <Cell title={t('tel')} value={<Input placeholder={t('telPlaceHolder')}></Input>} size='large' />
        <Cell title={t('city')} value={city} size='large' onClick={() => navigate('/city')} />
      </CellGroup>
    </div>
  )
}

export default Index